<script lang="ts" setup>
import MyBox from '@/components/MyBox.vue'
import MyChart from '@/components/MyChart.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

watch(
  () => props.data,
  (val) => {
    const { xList, yList, ratioList, legendList } = val
    options.value.legend.data = legendList
    options.value.xAxis[0].data = xList
    options.value.series[1].data = yList
    options.value.series[0].data = ratioList
    options.value.series[0].name = legendList[0]
    options.value.series[1].name = legendList[1]
    //取2组数据中的最大值
    const tempArr = [...yList, ...ratioList]
    const tempMax = Math.max(...tempArr)
    const maxValue = Math.ceil(tempMax / 100) * 100
    options.value.yAxis[0].max = maxValue
  }
)
const options = ref({
  grid: {
    right: 30,
    top: 40,
    bottom: 30
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    textStyle: {
      color: '#ebeef5',
      fontSize: 16
    },
    data: []
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '08:00',
        '08:30',
        '09:00',
        '09:30',
        '10:00',
        '10:30',
        '11:00',
        '11:30',
        '12:00',
        '12:30',
        '13:00',
        '13:30',
        '14:00',
        '14:30',
        '15:00',
        '15:30',
        '16:00',
        '16:30',
        '17:00',
        '17:30',
        '18:00',
        '18:30',
        '19:00',
        '19:30',
        '20:00'
      ],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        // formatter: function (value: string) {
        //   var temp = value.split(':')
        //   if (temp[1] === '30') return value
        // },
        // 格式化标签
        // formatter: function (value: string) {
        //   const temp = value.split(':')
        //   if(temp[1] == '30') return `${value}`
        // },
        color: '#ebeef5',
        fontSize: 24
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#182758',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      min: 18,
      max: 22,
      interval: 1,
      nameTextStyle: {
        color: '#ebeef5',
        fontSize: 24,
        align: 'right',
        padding: [0, 5, 8, 0]
      },
      axisLabel: {
        formatter: '{value}',
        color: '#ebeef5',
        fontSize: 24,
        align: 'right'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#182758',
          width: 2
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '',
      type: 'line',
      color: '#92d051',
      label: {
        show: false,
        position: 'top',
        color: '#fff',
        fontSize: 18
      },
      smooth: true,
      symbol: 'none',
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ''
        }
      },
      markLine: {
        symbol: 'none', // 去掉箭头
        label: {
          show: false // 去掉数值
        },
        data: [
          {
            yAxis: 19,
            lineStyle: {
              type: 'dashed', // 线的样式为虚线
              color: '#E6A23C' // 线的颜色为红色
            }
          },
          {
            yAxis: 20,
            lineStyle: {
              type: 'dashed', // 线的样式为虚线
              color: '#67C23A' // 线的颜色为红色
            }
          },
          {
            yAxis: 21,
            lineStyle: {
              type: 'dashed', // 线的样式为虚线
              color: '#E6A23C' // 线的颜色为红色
            }
          }
        ]
      },
      data: [
        19.5, 20.5, 20.5, 19.8, 20.3, 19.8, 20.5, 20.3, 19.8, 20.5, 19.7, 20.5, 20, 19.8, 20.3,
        19.7, 20.2, 20.5, 19.8, 20.1, 19.6, 20.5, 20.7, 19.8, 19.7
      ]
    }
  ]
})
</script>
<template>
  <MyBox class="yield-comparison" title="线速信息">
    <template v-slot:main>
      <div class="flex justify-between">
        <div class="w-4/5 chart-box">
          <MyChart height="320px" :option="options" />
        </div>
        <div class="flex flex-col items-center justify-around w-1/5 mt-5 text-center line-status">
          <span class="justify-self-center circle"></span>
          <span class="line-status">线速状态</span>
        </div>
      </div>
    </template>
  </MyBox>
</template>
<style scoped>
.row-box-wrapper {
  padding: 30px 15px;
}

.yield-comparison {
  font-size: 22px;
  width: 100%;
}
.circle {
  width: 150px;
  height: 150px;
  background: rgba(103, 194, 58, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 1px 1px rgba(103, 194, 58, 0.3);
}
.line-status {
  font-size: 32px;
}
</style>
